<template>
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
          v-model="loginFrom.username"
          name="username"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
          v-model="loginFrom.school"
          name="school"
          label="学校"
          placeholder="学校"
          :rules="[{ required: true, message: '请填写学校' }]"
      />
      <van-field
          v-model="loginFrom.phone"
          name="phone"
          label="手机号"
          placeholder="请输入手机号"
          :rules="[{ required: true, message: '请输入手机号'}]"
      />
      <!--年级模块-->
      <van-field
          v-model="loginFrom.grade"
          is-link
          readonly
          name="englishLevel"
          label="年级"
          placeholder="点击选择年级"
          @click="showGradeLevel = true"
      />
      <van-popup v-model=showGradeLevel :show="showGradeLevel" position="bottom">
        <van-picker
            :columns="gradeList"
            @confirm="onConfirmGradeLevel"
            @cancel="showGradeLevel = false"
        />
      </van-popup>
      <!--英语水平模块-->
      <van-field
          v-model="loginFrom.englishLevel"
          is-link
          readonly
          name="englishLevel"
          label="英语水平"
          placeholder="点击选择英语水平"
          @click="showEnglishLevel = true"
      />
      <van-popup v-model=showEnglishLevel :show="showEnglishLevel" position="bottom">
        <van-picker
            :columns="englishList"
            @confirm="onConfirmEnglishLevel"
            @cancel="showEnglishLevel = false"
        />
      </van-popup>
      <!--参赛经历-->
      <van-field
          v-model="loginFrom.entryExperience"
          is-link
          readonly
          name="entryExperience"
          label="参赛经历"
          placeholder="点击选择参赛经历"
          @click="showEntryExperience = true"
      />
      <van-popup v-model=showEntryExperience :show="showEntryExperience" position="bottom">
        <van-picker
            :columns="entryExperienceList"
            @confirm="onConfirmEntryExperience"
            @cancel="showEntryExperience = false"
        />
      </van-popup>
    </van-cell-group>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>
  <!--  设置我们的弹出框加上我们的二维码-->
  <van-dialog v-model:show="showImage" title="标题" show-cancel-button :confirm="confirm">
    <img src="https://img01-xusong.91q.com/5187FEF5-28D1-446C-BDB4-2FC0B2351DBE.jpg" alt="加载"
         style="width: 340px;height: 500px"/>
  </van-dialog>
</template>
<script setup>
import {reactive, ref} from "vue";
import API from "../plugins/axiosInstance.js";

const confirm = () => {
}
const showImage = ref(false);
const showGradeLevel = ref(false);
const gradeList = [
  {text: '大一', value: '1'},
  {text: '大二', value: '1'},
  {text: '大三', value: 'zhuansi'},
  {text: '大四', value: 'zhuanba'},
];
const showEnglishLevel = ref(false);
const englishList = [
  {text: '四级', value: 'siji'},
  {text: '六级', value: 'liuji'},
  {text: '专四', value: 'zhuansi'},
  {text: '专八', value: 'zhuanba'},
];
const showEntryExperience = ref(false);
const entryExperienceList = [
  {text: '全国大学生跨境电商助农短视频大赛', value: 'siji'},
  {text: '全国大学生跨境电商大赛', value: 'liuji'},
  {text: '全国大学生英文创意视频大赛', value: 'zhuansi'},
  {text: '其他', value: 'zhuanba'},
]
const loginFrom = reactive({
  username: "",
  school: "",
  phone: "",
  englishLevel: "",
  grade: "",
  entryExperience: ""
})
//确定我们的英语水平
const onConfirmEnglishLevel = ({selectedOptions}) => {
  loginFrom.englishLevel = selectedOptions[0]?.text;
  showEnglishLevel.value = false;
};
//获取我们的参赛经历
const onConfirmEntryExperience = ({selectedOptions}) => {
  loginFrom.entryExperience = selectedOptions[0]?.text;
  showEntryExperience.value = false;
};
//确定我们的学生的年级
const onConfirmGradeLevel = ({selectedOptions}) => {
  loginFrom.grade = selectedOptions[0]?.text;
  showGradeLevel.value = false;
};
//指定我们的参数类型
const onSubmit = (values) => {
  let param = new FormData();//创建form对象
  //获取keys值然后进行遍历取出我们的需要的值
  let keys = Object.keys(loginFrom)
  for (let i = 0; i < keys.length; i++) {
    console.log(keys[i])
    param.append(keys[i], loginFrom[keys[i]]);
  }
  API({
    url: '/student/insertQuestion',
    method: 'post',
    data: param,
  }).then((res) => {
    showImage.value = true
    console.log(showImage.value)
  });
};
</script>

<style scoped>

</style>